<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>二级导航栏</title>
    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="./css/index.css">
</head>

<body>
    <!-- 该案列是以阿里的 iconfont网站的导航栏为模板的，意在如何使用纯 css制作一个二级导航栏 -->
    <div class="wrap">
        <div class="header">
            <div class="header_left">
                <img src="./image/logo.svg" alt="">
                <span>iconfont</span>
            </div>
            <div class="header_right">
                <ul>
                    <li><a href="#">首页</a></li>
                    <li class="show_list">
                        <a href="#">
                            <span>素材</span>
                            <ul class="move_list">
                                <li><a href="#">图标库</a></li>
                                <li><a href="#">矢量图标库</a></li>
                                <li><a href="#">3D图标库</a></li>
                                <li><a href="#">lottie库</a></li>
                                <li><a href="#">字体库</a></li>
                            </ul>
                        </a>
                    </li>
                    <li><a href="#">资源管理</a></li>
                    <li><a href="#">活动</a></li>
                    <li>
                        <a href="#">侧边栏</a>
                        <div class="slider">
                            <ul>
                                <li>侧边栏内容1</li>
                                <li>侧边栏内容2</li>
                                <li>侧边栏内容3</li>
                                <li>侧边栏内容4</li>
                                <li>侧边栏内容5</li>
                            </ul>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</body>

</html>